<template>
	<view class="clock_num_box">
		<view class="title">
			<view class="info_box">
				<MyIcons size="50rpx" :src="joinSystemPath('NoN.png')" />
				<view class="info">打卡排行榜</view>				
			</view>
			<view class="week_tip">
				<uni-notice-bar
					:color="primary_hot_color" 
					:background-color="primary_main_bgc" 
					:speed="40" 
					diyHeight="10rpx" 
					:fontSize="12" 
					:how-icon="false"
					:showIcon="true"
					scrollable 
					:text="`本周是${nowDormitoryWeekTypeStr}~本周是${nowDormitoryWeekTypeStr},宿舍设置里可重新调平单双周`" />
			</view>
			<view class="duty_rule" @click="()=>modalDutyRule = Math.random()">值日规则</view>
		</view>
		<view class="content">
			<scroll-view 
				:scroll-top="scrollTop" 
				scroll-y="true" 
				class="scroll-Y" 
				@scrolltolower="scrolltolower"
				@scrolltoupper="scrolltoupper"
				:lower-threshold="0"
				:upper-threshold="0"
			>
				<view class="item" v-for="(item,index) in clocks" :key="index">
					<view class="no_n">
						<template v-if="index<3">
							<MyIcons size="50rpx" :src="joinSystemPath(`No${index+1}.png`)" />
							<view class="num" :style="`color:${ClockNumColor[index]}`">
								{{index+1}}
							</view>
						</template>
						<template v-else>
							<MyIcons size="50rpx" :src="joinSystemPath(`NoOrther.png`)" />
							<view class="num_orther" :style="`color:${ClockNumColor[index]}`">
								{{index+1}}
							</view>
						</template>
					</view>
					<view class="name text_ellipsis">
						{{item.user.nick_name_by_dormitory}}
					</view>
					<view class="count">
						{{changeNums(item.clockCount,10000000)+" 次"}}
					</view>
				</view>
			</scroll-view>
		</view>
		<MyModal :openModalFlag="modalDutyRule" :okFun="()=>()=>modalClockRule = -Math.random()">
			<template #title>
				值日规则
			</template>
			<template #content>
				<TipInfo :color="shallow_text_color" id="7"></TipInfo>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {
		ref, 
		computed, 
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import MyModal from '@/components/MyModal/MyModal.vue'
	import TipInfo from '@/components/TipInfo/TipInfo.vue'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {
		changeNums
	} from '@/utils/changeData.js'
	
	const ClockNumColor=['#E5A14F','#999999','#BFBFBF']

	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	
	const scrollTop = ref(0)
	let timer = ref(null)
	const rightHeight = ref('0rpx')
	const _symbol=ref('')
	const modalDutyRule = ref(-1)
	
	const {
		primary_text_color,
		primary_hot_color,
		primary_main_bgc,
		shallow_text_color
	} = dynamicStyle_store.dormitoryStyle	
	
	const props = defineProps({
		clocks:{
			type:Array
		},
		nowDormitoryWeekTypeStr:{
			type:String
		}
	})
	
	//自动滚动
	const autoScroolFun=()=>{
		scrollTop.value+=Number(_symbol.value+2)
	}
	//滚动到底部
	const scrolltolower=()=>{
		_symbol.value='-'
	}
	//滚动了顶部
	const scrolltoupper=()=>{
		_symbol.value=''
		clearInterval(timer.value)
	}
	
	const getRightDomFun=()=>{
		if(timer.value){
			clearInterval(timer.value)
		}
		const currentInstance = getCurrentInstance();
		console.log('电话都会好地方',currentInstance)
		const query = uni.createSelectorQuery().in(currentInstance);
		query.select('.content').boundingClientRect(data => {
			const {height} = data
			rightHeight.value = (height+(height/3))+'rpx'
			timer.value=setInterval(autoScroolFun,100)
		}).exec();
	}
	
	// #ifdef H5
	onMounted(()=>{
		getRightDomFun()
	})
	// #endif
	onReady(()=>{
		getRightDomFun()
	})
	onUnload(()=>{
		clearInterval(timer.value)
	})

</script>

<style lang="less">
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.clock_num_box{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		.title{
			display: grid;
			grid-template-columns: 2fr 2fr 1fr;
			align-items: center;
			color: v-bind(primary_hot_color);
			background-color: v-bind(primary_main_bgc);
			padding-left: 2rpx;
			position: relative;
			font-size: 24rpx;
			.info_box{
				display: flex;
				align-items: center;
				.info{
					padding-left: 15rpx;
				}
			}
			.week_tip{
				// justify-self: center;
				width: 100%;
			}
			.duty_rule{
				color: v-bind(shallow_text_color);
				justify-self: end;
			}
		}
		.content{
			.item{
				display: grid;
				grid-template-columns: 60rpx 1fr 150rpx;
				align-items: center;
				margin: 5rpx 0;
				.no_n{
					position: relative;
					.num{
						position: absolute;
						top: 13%;
						left: 43%;
						font-size: 20rpx;
					}
					.num_orther{
						position: absolute;
						top: 24%;
						left: 43%;
						font-size: 20rpx;
						color: v-bind(shallow_text_color);
					}
				}
				.name{
					padding-left: 13rpx;
					color: v-bind(primary_text_color);
					font-size: 24rpx;
				}
				.count{
					text-align: end;
					padding-right: 10rpx;
					color: v-bind(shallow_text_color);
					font-size: 24rpx;
				}
			}
			.item:nth-child(1){
				margin-top: 20rpx;
			}
		}
		.scroll-Y {
			max-height: calc(15vh);
		}
	}
</style>